<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>员工列表</title>
    <%
        pageContext.setAttribute("APP_PATH", request.getContextPath());
    %>
    <%--引入jquery--%>
    <%--引入css样式--%>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script type="text/javascript" src="${APP_PATH}/static/js/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="${APP_PATH}/static/bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <script type="text/javascript" src="${APP_PATH}/static/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>

</head>
<body>

<!-- 员工添加的模态框 -->
<div class="modal fade" id="empAddModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">添加员工</h4>
            </div>

            <div class="modal-body">
                <form class="form-horizontal">

                    <div class="form-group">
                        <label class="col-sm-2 control-label">员工姓名</label>
                        <div class="col-sm-10">
                            <input type="text" name="empName" class="form-control" id="empName_add_input"
                                   placeholder="请输入员工姓名">
                            <span class="help-block"></span>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">email</label>
                            <div class="col-sm-10">
                                <input type="text" name="empEmail" class="form-control" id="empEmail_add_input"
                                       placeholder="请输入邮箱">
                                <span class="help-block"></span>
                            </div>
                        </div>


                        <div class="form-group">
                            <label class="col-sm-2 control-label">性别</label>
                            <div class="col-sm-10">
                                <label class="radio-inline">
                                    <input type="radio" name="empGender" id="empGender1_add_input" value="M" checked> 男
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="empGender" id="empGender2_add_input" value="F"> 女
                                </label>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">部门</label>
                            <div class="col-sm-4">
                                <%--                            部门提交部门id即可--%>
                                <select class="form-control" name="dId" id="dept_add_select">
                                </select>
                            </div>
                        </div>

                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="emp_save_btn">保存</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->






<div class="container">
    <fieldset>
        <legend class="layui-field-title">员工信息</legend>
        <!-- 设置条件查询框 -->
        <div class="row">
            <div class="col-md-5 col-md-offset-2">
                <form class="form-inline" id="conditionalForm">
                    <div class="form-group" style="margin: 0.1em">
                        <label for="InputName" style="margin: 0.3em">员工姓名:</label>
                        <input type="text" class="form-control" id="InputName" placeholder="请输入员工姓名" name="empName">
                    </div>
                    <div class="form-group" style="margin: 0.1em">
                        <label style="margin: 0.3em">部门:</label>
                        <select class="form-control" name="dId" id="dept_query_select">
                            <option value="0">--请选择--</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="col-md-5 ">
                <button type="submit" class="btn btn-primary" id="condition_button">查询</button>
                <button type="submit" class="btn btn-danger" id="condition_reset_button">重置条件/返回</button>
            </div>
        </div>

    </fieldset>
    <%--    按钮--%>
    <div class="row">
        <div class="col-md-9">
            <button class="btn btn-primary btn-sm" id="emp_add_modal_btn">新增</button>
            <button class="btn btn-danger btn-sm" id="emp_delete_all_btn">删除</button>
        </div>
        <%--            分页文字信息--%>
        <div class="col-md-3" id="page_info_area">

        </div>
    </div>



<script type="text/javascript">

    var totalRecord,currentPage,currentDept;
    currentDept = 0;
    <%--页面加载完成之后，直接发送一个ajax请求，要到分页数据--%>
    $(function (){
        //跳转到首页
        to_page(1);
    })

    //跳转到指定的页面,发送ajax请求，获取json数据
    function to_page(pn){
        $.ajax({
            url:"${APP_PATH}/emps",
            data:"pn=" + pn + "&" + $('#conditionalForm').serialize(),
            type:"GET",
            //result获取到了返回的Msg对象(JSON数据)
            success:function (result){
                //重新显示下拉列表的部门信息
                getDepts2("#conditionalForm select");
                console.log(result);
                //    1、请求成功解析并显示员工信息
                build_emps_table(result);
                //    2、解析并显示分页信息
                build_page_info(result);
                //    3、解析显示分页条数据
                build_page_nav(result);
            }
        })
    }

    /**
     * 发送ajax请求，查询部门信息，以json格式返回
     * 加个请选择在里面，再查出所有的部门信息并显示在下拉列表里
     */
    function  getDepts2(ele){
        //清空之前下拉列表的值
        $(ele).empty();
        var optionEle = $("<option></option>").append("--请选择--").attr("value",0);
        //加入到ele对象中，这里传入的是查询表单对应的id值中select元素：#conditionalForm select
        optionEle.appendTo(ele);
        getDepts_Real(ele);
        $(ele).val(currentDept);
    }

   /*将返回的json字符串传入ele参数中，遍历加入到下拉列表中*/
    function getDepts_Real(ele){
        $.ajax({
            //不加这一条可能会在修改的时候部门信息显示错误
            async:false,
            url:"${APP_PATH}/depts",
            type:"GET",
            success:function (result){
                //在页面控制台中显示传入来的数据
                console.log(result);
                //显示部门信息在下拉列表中
                $.each(result.extend.depts,function(){
                    var optionEle = $("<option></option>").append(this.deptName).attr("value",this.deptId);
                    optionEle.appendTo(ele);
                })
            }
        })
    }


    /**********************添加员工操作*************************/

    //点击新增按钮弹出模态框
    //触发点击事件，调用函数
    $("#emp_add_modal_btn").click(function (){
        //清除表单数据(表单重置)
        reset_form("#empAddModal form")
        //发送ajax请求，查出部门信息，显示在下拉列表
        getDepts("#empAddModal select");
        //弹出模态框
        $("#empAddModal").modal({
            backdrop:"static"
        });
    });

    //清空模态框样式及内容(Bootstrap代码)---这里需要多思考
    function reset_form(ele){
        /*重置内容*/
        $(ele)[0].reset();
        /*清除has-error和has-success样式*/
        $(ele).find("*").removeClass("has-error has-success");
        /*将提示信息清空*/
        $(ele).find(".help-block").text("");
    }
    //先清除之前下拉列表的值再查出所有的部门信息并显示在下拉列表里
    function  getDepts(ele){
        //清空之前下拉列表的值
        $(ele).empty();
        getDepts_Real(ele);
    }

    /*此函数对填入的值进行前端检验*/
    function validate_add_form() {
        var empName = $("#empName_add_input").val();
        var regName = /(^[a-zA-Z0-9_-]{3,16}$)|(^[\u2E80-\u9FFF]{2,5})/;
        if (!regName.test(empName)) {
            // alert("用户名需是2-5位中文或者3-16位英文和数字的组合");
            //调用函数以指定的格式显示提示信息
            show_validate_msg("#empName_add_input", "error", "用户名需是2-5位中文或者3-16位英文和数字的组合");
            return false;
        } else {
            show_validate_msg("#empName_add_input", "success", "");
        }

        //2、验邮箱
        var email = $("#empEmail_add_input").val();
        var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
        if (!regEmail.test(email)) {
            //调用函数以指定的格式显示提示信息
            show_validate_msg("#empEmail_add_input", "error", "邮箱格式不正确");
            return false;
        } else {
            show_validate_msg("#empEmail_add_input", "success", "");
        }
        return true;
    }


    //当填入用户名信息时，向后台发送ajax请求，进行数据库查询，校验用户名是否可用
    $("#empName_add_input").change(function () {
        //发送ajax请求校验用户名是否可用
        var empName = this.value;
        $.ajax({
            url: "${APP_PATH}/checkuser",
            type: "POST",
            data: "empName=" + empName,
            success: function (result) {
                if (result.code == 100) {
                    show_validate_msg("#empName_add_input", "success", "用户名可用");
                    $("#emp_save_btn").attr("ajax-va", "success");
                } else {
                    show_validate_msg("#empName_add_input", "error", result.extend.va_msg);
                    $("#emp_save_btn").attr("ajax-va", "error");
                }
            }
        });
    });

    //添加学生模态框校验结果的提示信息样式(Bootstrap代码)
    function show_validate_msg(ele, status, msg) {
        //防止第一次填写后重新填写时，保留了原来的样式和内容
        $(ele).parent().removeClass("has-success has-error");
        $(ele).next("span").text("");

        if ("success" == status) {
            $(ele).parent().addClass("has-success");
            $(ele).next("span").text(msg);
        } else if ("error" == status) {
            $(ele).parent().addClass("has-error");
            $(ele).next("span").text(msg);
        }
    }

    //点击保存员工
    $("#emp_save_btn").click(function (){
            //模态框填写的表单数据提交给服务器进行保存
            //1、先对输入的数据进行校验，此处若是被跳过前端校验，那么还有后端校验能够防住某些人的操作
            // if (!validate_add_form()) {
            //     return false;
            // }
            // confirm("用户名是否重复："+$(this).attr("ajax-va"));

            //判断之前的ajax用户名校验是否成功
            if ($(this).attr("ajax-va") == "error") {
                console.log("用户名重复不正确");
                return false;
            }

            //2、发送ajax请求保存员工
            $.ajax({
                url: "${APP_PATH}/emp",
                type: "POST",
                data: $("#empAddModal form").serialize(),
                success: function (result) {
                    if (result.code == 100) {
                        //    保存成功
                        //    1、关闭模态框
                        $("#empAddModal").modal('hide');
                        //    2、来到最后一项，显示刚才保存的数据
                        //    发送ajax请求显示最后一页数据
                        to_page(totalRecord);
                    } else {
                        console.log(result);
                        if (undefined != result.extend.errorFields.empEmail) {
                            show_validate_msg("#empEmail_add_input", "error", result.extend.errorFields.empEmail);
                        }
                        if (undefined != result.extend.errorFields.empName) {
                            show_validate_msg("#empName_add_input", "error", result.extend.errorFields.empName);

                        }
                    }
                }
            });
        });


/*****************************************************************/
    <%--//获取员工信息--%>
    <%--function getEmp(id){--%>
    <%--    $.ajax({--%>
    <%--        url:"${APP_PATH}/emp/"+id,--%>
    <%--        type:"GET",--%>
    <%--        success: function (result) {--%>
    <%--            var empData = result.extend.emp;--%>
    <%--            $("#empName_update_static").text(empData.empName);--%>
    <%--            $("#empEmail_update_input").val(empData.empEmail);--%>
    <%--            $("#empUpdateModal input[name=empGender]").val([empData.empGender]);--%>
    <%--            $("#empUpdateModal select").val([empData.dId]);--%>
    <%--        }--%>
    <%--    })--%>
    <%--}--%>



</script>


</body>
</html>